<template>
	<view class="leader">
		<view class="header spaceBetween" v-if="title && title != ''">
			<view class="title">
				{{ title }}
			</view>
			<view class="mode flex" @click="mode">
				<view class="">更多</view>
				<image class="navto" src="/static/images/navto.svg" mode=""></image>
			</view>
		</view>
		<slot></slot>
		<view class="list flex">
			<view class="item" v-for="(item, index) in listData" @click="goodsDetails(item, index)">
				<divImg class="img" :src="NoStudyGroup ? item.image : item.img" mode="aspectFill"></divImg>
				<view class="test clamp">
					{{ NoStudyGroup ? item.name : item.title }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'goodsList',
		props: {
			title: '',
			listData: {
				type: Array,
				default: () => [],
			},

			NoStudyGroup: {
				type: Boolean,
				default: false,
			},
		},
		watch: {
			listData: {
				handler(newVal, oldVal) {
					this.list = newVal;
				},
				immediate: true,
			},
		},
		data() {
			return {
				list: [],
			};
		},
		methods: {
			mode() {
				this.$emit('mode');
			},
			goodsDetails(item, index) {
				if (!this.NoStudyGroup) {
					uni.navigateTo({
						url: '/pages/index/future/detail/detail?id=' + item.id,
					});
					return;
				}
				this.$emit('goodsDetails', { item, index });
			},
		},
	};
</script>

<style lang="scss" scoped>
	.header {
		margin: $margin-width auto;
		overflow: hidden;
		width: $connet-width;

		.title {
			font-weight: bold;
			color: #000000;
			font-size: $uni-font-size-14;
		}

		.mode {
			font-weight: 400;
			color: $price-color;
			font-size: $uni-font-size-10;
			align-items: center;
			.navto {
				width: 30rpx;
				height: 25rpx;
				&:before {
					color: red;
					fill: red;
					background-color: red;
				}
			}
		}
	}

	.list {
		width: $connet-width;
		margin: 20rpx auto 0;
		overflow: hidden;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			width: 330rpx;
			height: 440rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-bottom: 20rpx;
			.img {
				width: 330rpx;
				height: 330rpx;
				background: #cfcfcf;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
			.test {
				width: 297rpx;
				height: 110rpx;
				line-height: 50rpx;
				margin: 0 auto;
				font-size: $uni-font-size-12;
				color: #000000;
			}
		}
	}
</style>
